{% extends 'layout.html' %}

{% block content %}
    <div class="container">
        <h1>任务管理</h1>

        <h3>示例1</h3>
{#        <input type="button" class="btn btn-primary" value="点击" onclick="clickMe();"/>  <!-- 基于DOM绑定事件 -->#}
        <input id="btn1" type="button" class="btn btn-primary" value="点击"/>  <!-- 基于jQuery绑定事件 -->
    </div>
{% endblock %}

{% block js %}
    <script type="text/javascript">
        {#基于DOM绑定事件#}
        {% comment %}function clickMe() {
            {#console.log('点击了按钮')#}
            $.ajax({
                url: '/tools/task/ajax/',
                type: 'post',
                data: {
                    n1: 123,
                    n2: 456
                },
                success: function (res) {
                    console.log(res)
                }
            })
        }{% endcomment %}
    
        {#基于jQuery绑定事件#}
        $(function () {
            // 页面框架加载完成后代码自动执行
            bindBtn1Event();
        });
        
        function bindBtn1Event() {
            $('#btn1').click(function () {
                $.ajax({
                    url: '/tools/task/ajax/',
                    type: 'post',
                    data: {
                        n1: 123,
                        n2: 456,
                    },
                    success: function (res) {
                        console.log("返回数据:", res);
                    }
                })
            })
        }

    </script>
{% endblock %}

